<template>
  <view class="w-full">
    <!-- 名医护士按钮 -->
    <view class="nurse-button" @click="showDirectoryPopup">
      <text class="text-lg font-bold">名医护士</text>
      <text class="text-sm text-gray-500 ml-2">点击选择科室</text>
    </view>
    
    <!-- 已选择的科室显示 -->
    <view v-if="selectedDepartment" class="selected-info">
      <text class="text-sm text-gray-600">已选择：{{ selectedDepartment.name }}</text>
    </view>
    
    <!-- 护士列表 -->
    <view v-if="selectedDepartment && nurseList.length > 0" class="nurse-list">
      <view class="two-column-layout">
        <view class="item-card" v-for="item in nurseList" :key="item.id" @click="onNurseClick(item)">
          <image :src="item.avatar || defaultAvatar" mode="aspectFill" class="item-image"></image>
          <view class="mt-2">
            <text class="text-[24rpx] text-[#999]">{{ item.name || '未知' }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <view v-else-if="selectedDepartment && !loading" class="text-center text-gray-500 py-8">
      <text>暂无护士数据</text>
    </view>
    
    <!-- 三级目录选择弹窗 -->
    <!-- 使用封装的弹窗组件 -->
    <ThreeLevelDirectoryPopup
      v-model:visible="showPopup"
      title="选择科室"
      confirm-text="确认选择"
      :loading="loading"
      @close="closeDirectoryPopup"
      @confirm="handleConfirm"
      @change="onDirectoryChange"
    />

  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import ThreeLevelDirectoryPopup from "./ThreeLevelDirectoryPopup.vue";
import { request } from "@/service/request";
import Taro from "@tarojs/taro";
import defaultAvatar from "@/assets/imgs/none.png";

// 护士列表数据
const nurseList = ref([]);
const loading = ref(false);
const currentSelectedItem = ref(null);
const selectedDepartment = ref(null);

// 三级目录组件ref
const directoryRef = ref(null);

// 弹窗状态管理
const showPopup = ref(false);

// 当前选中的项目信息
const currentLevel1Item = ref(null);
const currentLevel2Item = ref(null);

// 获取护士列表
const getNurseList = async (tagId) => {
  try {
    loading.value = true;
    console.log("获取护士列表, tagId:", tagId);
    
    const params = {
      pageSize: 12,
      pageNo: 1,
      isHealth: 1
    };
    
    // 如果有tagId，添加到参数中
    if (tagId) {
      params.tagId = tagId;
    }
    
    const res = await request.get('/nurse_nurses/nurseNurses/list', params, {
      useErrMsg: true
    });
    
    console.log("护士列表数据:", res);
    
    if (res.success && res.success.records) {
      nurseList.value = res.success.records;
    } else if (res.success && Array.isArray(res.success)) {
      nurseList.value = res.success;
    } else {
      nurseList.value = [];
    }
  } catch (error) {
    console.error("获取护士列表失败:", error);
    nurseList.value = [];
  } finally {
    loading.value = false;
  }
};

// 显示目录选择弹窗
const showDirectoryPopup = () => {
  showPopup.value = true;
};

// 关闭目录选择弹窗
const closeDirectoryPopup = () => {
  showPopup.value = false;
};

// 处理确认选择事件
const handleConfirm = async (data) => {
  console.log('确认选择:', data);
  
  const { currentItem, level1Item, level2Item } = data;
  selectedDepartment.value = currentItem;
  showPopup.value = false;
  
  // 获取护士列表
  await getNurseList(currentItem.id);
};

// 目录变化事件
const onDirectoryChange = (data) => {
  console.log('目录变化:', data);
  
  const { currentItem, level1Item, level2Item } = data;
  currentSelectedItem.value = currentItem;
  currentLevel1Item.value = level1Item;
  currentLevel2Item.value = level2Item;
};


// 护士点击事件
const onNurseClick = (nurse) => {
  console.log('点击护士:', nurse);
  
  // 跳转到护士详情页
  Taro.navigateTo({
    url: `/pages/nurse/detail?id=${nurse.id}`
  });
};
</script>

<style lang="scss" scoped>
.two-column-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  
  .item-card {
    flex: 0 0 calc(30% - 8rpx);
    padding: 32rpx 10rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    .item-image {
      width: 112rpx;
      height: 112rpx;
      background-color: #909090;
      border-radius: 50%;
      display: block;
      flex-shrink: 0;
    }
  }
}

.nurse-button {
  display: flex;
  align-items: center;
  padding: 32rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16rpx;
  margin: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
  }
}

.selected-info {
  padding: 16rpx 32rpx;
  background-color: #f8f9fa;
  border-left: 4rpx solid #667eea;
  margin: 16rpx;
  border-radius: 8rpx;
}

.nurse-list {
  padding: 16rpx;
}

.directory-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    background-color: #fff;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .close-btn {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
      border-radius: 50%;
      cursor: pointer;
      font-size: 24rpx;
      color: #666;
    }
  }
  
  .popup-content {
    flex: 1;
    overflow: hidden;
    
    .selection-info {
      padding: 32rpx;
      text-align: center;
      
      .selected-item {
        margin-bottom: 32rpx;
        
        text:first-child {
          display: block;
          margin-bottom: 8rpx;
        }
      }
    }
  }
  
  .popup-footer {
    padding: 24rpx 32rpx;
    border-top: 1rpx solid #f0f0f0;
    background-color: #fff;
    
    .confirm-btn {
      width: 100%;
      height: 80rpx;
      border-radius: 12rpx;
      font-size: 28rpx;
    }
  }
}
</style>
